<style lang="less">
  .ue-excellent-route {
    .ue-dialog-er-edit {

    }
    .ue-dialog-er-config {
      .el-col-line-style {
        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid #A1A1A1;
        background-color: #E9E9E9;
        .el-row {
          padding-left: 10px;
          label {
            font-weight: 600;
            .el-icon-warning {
              margin-left: 10px
            }
          }
          .el-checkbox {
            float: right;
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
<!--精品线路列表-->
<template>
  <section class="ue-excellent-route">
    <!--工具条-->
    <search-bar style="height: 90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="精品线路名称">
            <el-input v-model="searchCondition.LIKE_routeName"
                      placeholder="请输入精品线路名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建日期">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              align="right"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启用状态">
            <el-select v-model="searchCondition.EQ_status" placeholder="请选择启用状态">
              <el-option v-for="item in $store.getters.INDICATOR"
                         :key="item.dictVal"
                         :label="item.cnDictValname == '是'? '已启用': '未启用'"
                         :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="起始城市">
            <el-input v-model="searchCondition.LIKE_startRegion"
                      placeholder="请输入起始城市"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的城市">
            <el-input v-model="searchCondition.LIKE_endRegion"
                      placeholder="请输入目的城市"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运输产品">
            <el-select v-model="searchCondition.EQ_ageingType" placeholder="请选择运输产品">
              <el-option v-for="item in $store.getters.AGING_CLASSIFICATION"
                         :key="item.dictVal"
                         :label="item.cnDictValname"
                         :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="dialogExcellentRoute(null,'new')">发布精品线路</el-button>
      <el-button type="primary" @click="resetSearchCondition" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchTableList" style="float: right">查询</el-button>
      <el-button type="primary" @click="searchTableList" style="float: right" :disabled=true>导出</el-button>
    </el-col>
    <!--列表-->
    <el-table :data="tableData" highlight-current-row border @sort-change="sortChange" max-height="660" he
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="createDate" label="创建日期" width="100" sortable align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.createDate != null">
            {{scope.row.createDate.toString().substring(0, 10)}}
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="routeName" label="精品线路名称" width="150" sortable align="center">
      </el-table-column>
      <el-table-column prop="startRegion" label="起始城市" width="180" sortable>
      </el-table-column>
      <el-table-column prop="endRegion" label="目的城市" width="180" sortable>
      </el-table-column>
      <el-table-column prop="stowageName" label="发布渠道" width="120" align="center">
      </el-table-column>
      <el-table-column prop="ageingTypeName" label="运输产品" width="80" align="center">
      </el-table-column>
      <el-table-column prop="status" label="启用状态" width="80" align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.status === 111002001">已启用</label>
          <label v-if="scope.row.status === 111002002">未启用</label>
        </template>
      </el-table-column>
      <el-table-column prop="ageingScope" label="运输时效" width="80" align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.ageingScope">{{scope.row.ageingScope}}小时</label>
        </template>
      </el-table-column>
      <el-table-column prop="serialNumber" label="排序" width="60" sortable align="center">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="excellentRouteServiceDetailNames"  min-width="200" label="服务承诺">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <template slot-scope="scope">
          <!--<el-button type="primary" style="margin-left: 5px;"-->
                     <!--@click="dialogExcellentRoute(scope.row.id,'view')">查看-->
          <!--</el-button>-->
          <el-button type="primary" style="margin-left: 5px;" v-if="scope.row.status === 111002002"
                     @click="dialogExcellentRoute(scope.row.id,'edit')">编辑
          </el-button>
          <el-button type="success" style="margin-left: 5px;" v-if="scope.row.status === 111002002"
                     @click="btnStartUsing(scope.row.id,scope.row)">启用
          </el-button>
          <el-button type="warning" style="margin-left: 5px;margin-top: 5px" v-if="scope.row.status === 111002001"
                     @click="btnEndUsing(scope.row.id, scope.row)">禁用
          </el-button>
          <el-button type="primary" style="margin-left: 5px;margin-top: 5px"
                     @click="toConfigDialog(scope.row)">服务配置
          </el-button>
          <!--<el-button type="danger" style="margin-left: 5px;margin-top: 5px" @click="btnDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>

    <!--发布精品线路 -->
    <el-dialog :title="dialogTitlePublish" width="60%" :visible.sync="dialogPublishVisible"
               :close-on-click-modal="false" @close="resetInfoForm" class="ue-dialog-er-edit">
      <el-form :key="dialogKeyPublish" :model="objInfo" :rules="objInfoRules" label-width="120px" ref="objInfo">
        <el-row class="f-mt10 f-mb10">
          <el-col :span="8">
            <el-form-item class="width70" label="精品线路名称" prop="routeName">
              <el-input v-model="objInfo.routeName" placeholder="请输入精品线路名称" :disabled="isView"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始城市" prop="objInfoStartCitySelect" class="width70">
              <el-cascader style="width: 100%" :props="addressProps" :options="addressDictData" change-on-select :disabled="isView"
                           placeholder="请选择起始城市"
                           v-model="objInfo.objInfoStartCitySelect">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的城市" prop="objInfoEndCitySelect" class="width70">
              <el-cascader style="width: 100%" :props="addressProps" :options="addressDictData" change-on-select :disabled="isView"
                           placeholder="请选择目的城市"
                           v-model="objInfo.objInfoEndCitySelect">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发布渠道" prop="stowageId">
              <el-select v-model="objInfo.stowageId" style="width: 100%" placeholder="请选择发布渠道" :disabled="isView">
                <el-option v-for="item in $store.getters.STOWAGES"
                           :label="item.name"
                           :key="item.id"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输产品" prop="ageingType">
              <el-select v-model="objInfo.ageingType" style="width: 100%" placeholder="请选择运输产品" :disabled="isView">
                <el-option v-for="item in $store.getters.AGING_CLASSIFICATION"
                           :key="item.dictVal"
                           :label="item.cnDictValname"
                           :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="归属组织" class="width70" prop="objInfoOrgIds">
              <el-cascader style="width: 100%" :disabled="isView"
                           placeholder="请选择归属组织"
                           :options="$store.state.initOrganizations"
                           :props="{label: 'name',value: 'id'}"
                           change-on-select
                           v-model="objInfo.objInfoOrgIds"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item class="width70" label="运输时效" prop="ageingScope">
              <el-input type="number" step="1" v-model="objInfo.ageingScope" placeholder="请输入运输时效（单位小时）" :disabled="isView"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="width70" label="排序">
              <el-input type="number" step="1" v-model="objInfo.serialNumber" :disabled="isView"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="线路介绍" prop="introduction">
            <quill-editor v-model="objInfo.introduction" style="width: 100%;height: 150px" :disabled="isView"
                          ref="myQuillEditor"
                          class="editer">
            </quill-editor>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 70px">
          <el-form-item label="路线图片">
            <el-upload
              :disabled="isView"
              :on-success="handlePreviewImg"
              :on-remove="handleRemoveImg"
              :before-upload="beforeUploadImg"
              :on-preview="handlePictureCardPreview"
              class="upload-demo"
              action="/api/v2.0/admin/excellent_route/img"
              :limit="1"
              list-type="picture"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <label style="margin-left: 15px" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</label>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-checkbox v-model="objInfo.recommend" :true-label="111002001" :false-label="111002002" :disabled="isView">
              推荐到货主移动端首页
            </el-checkbox>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click.native="resetInfoForm">关闭</el-button>
            <el-button type="primary" @click.native="handleSubmit" :loading="submitLoading" :disabled="isView">保存
            </el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

    <div>
      <excellent-route-service-config-dialog v-on:isRefreshRoute="isRefreshRouteFun"
        :excellentRouteServiceConfigModel="excellentRouteServiceConfigModel"></excellent-route-service-config-dialog>
    </div>
    <!--图片预览-->
    <el-dialog :visible.sync="dialogVisiblePicture" size="tiny"  @close="closePictureCardPreview">
      <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog>
  </section>
</template>

<script>
import {
  delVehicle
} from '../../../api/stowage/VehicleManage';
import {
  saveExcellentRoute,
  searchExcellentRouteList,
  getExcellentRouteById,
  modifyStatus,
  deleteInfoById
} from '../../../api/stowage/ExcellentRoute';
import { objToFilter, resetObjNull, isEmpty, getSelectObect } from '../../../lib/util';
import { addressDictsSimpleWithType } from '../../../api/system/addressDict';
import ExcellentRouteServiceConfigDialog from '../../stowage/excellent-route/ExcellentRouteServiceConfigDialog.vue';

export default {
  components: {
    ExcellentRouteServiceConfigDialog
  },
  data () {
    return {
      excellentRouteServiceConfigModel: {},
      addressDictData: [],
      addressProps: {
        value: 'id',
        label: 'name'
      },
      searchCondition: {
        'LIKE_routeName': null, // 路线
        'GTE_createDate': null, // 发布日期
        'LTE_createDate': null, // 发布日期
        'EQ_status': null, // 启用状态
        'LIKE_startRegion': null, // 起始城市名称
        'LIKE_endRegion': null, // 目的城市名称
        'EQ_ageingType': null // 运输产品
      },
      dateRange: [], // 日期范围
      startCitySelect: [],
      endCitySelect: [],
      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: 'serialNumber',
      sortOrder: 'descending',
      listLoading: false,
      // 发布精品线路弹窗
      isView: false,
      dialogPublishVisible: false,
      submitLoading: false,
      dialogTitlePublish: '发布精品路线',
      dialogKeyPublish: 0,
      objInfo: {
        'id': null,
        'routeName': null,
        'status': 111002002,
        'startProvinceId': null,
        'startCityId': null,
        'startCountyId': null,
        'endProvinceId': null,
        'endCityId': null,
        'endCountyId': null,
        'stowageId': null,
        'ageingType': 112006002,
        'ageingTypeName': '定时快运',
        'orgId': null,
        'orgIds': null,
        'introduction': null,
        'image': null,
        'recommend': null,
        'sort': null,
        'ageingScope': null,
        objInfoStartCitySelect: [],
        objInfoEndCitySelect: [],
        objInfoOrgIds: []
      },
      objInfoRules: {
        routeName: [
          {required: true, message: '请输入精品线路名称', trigger: 'blur'}
        ],
        objInfoStartCitySelect: [
          {type: 'array', required: true, message: '请选择起始城市'}
        ],
        objInfoEndCitySelect: [
          {type: 'array', required: true, message: '请选择目的城市'}
        ],
        stowageId: [
          {required: true, message: '请选择发布渠道'}
        ],
        ageingType: [
          {required: true, message: '请选择运输产品'}
        ],
        objInfoOrgIds: [
          {required: true, type: 'array', message: '请选择归属组织'}
        ],
        introduction: [
          {required: true, message: '请输入线路简介'}
        ],
        ageingScope: [
          {required: true, message: '请输入运输时效（单位小时）'}
        ]
      },
      fileList: [],
      imageUrl: [],
      // 图片预览
      dialogVisiblePicture: false,
      dialogImageUrl: null
    };
  },
  methods: {
    // 服务配置
    toConfigDialog (row) {
      console.log(row);
      let dialogIsView = false;
      if (row.status === 111002001) {
        dialogIsView = true;
      }
      this.excellentRouteServiceConfigModel = JSON.stringify(Object.assign(row, {
        'isView': dialogIsView,
        'isShow': true,
        'time': Math.random()
      }));
    },
    // 服务配置关闭-刷新列表页
    isRefreshRouteFun (val) {
      if (val) {
        this.searchTableList();
      }
    },
    // 删除单条数据操作
    handleDel (index, row) {
      this.$confirm('确认删除该车辆吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        delVehicle(row.id).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.searchTableList();
        });
      }).catch(() => {
      });
    },
    // 精品线路信息窗口
    // 发布/查看/编辑精品线路
    dialogExcellentRoute (routeId, type) {
      this.isView = false;
      this.dialogPublishVisible = true;
      if (isEmpty(routeId)) {
        this.dialogTitlePublish = '发布精品路线';
        this.objInfo.ageingType = 112006002;
        this.objInfo.ageingTypeName = '定时快运';
        return null;
      } else if (type === 'edit') {
        this.dialogTitlePublish = '编辑精品路线';
      } else {
        this.dialogTitlePublish = '查看精品路线';
        this.isView = true;
      }
      this.getInfoExcellentRoute(routeId);
    },
    // 启用
    btnStartUsing (routeId, row) {
      this.$confirm('您确认启用该精品线路?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        modifyStatus(routeId, {status: 111002001})
          .then(res => {
            if (res.data.successFlg) {
              row.status = 111002001;
              this.$message('操作成功');
              this.searchPendingDeliveryShortTask();
            } else {
              this.$message.error(res.data.errorMsg);
            }
          });
      }).catch(() => {
      });
    },
    // 停用
    btnEndUsing (routeId, row) {
      this.$confirm('您确认禁用该精品线路?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyStatus(routeId, {status: 111002002})
          .then(res => {
            if (res.data.successFlg) {
              row.status = 111002002;
              this.$message('操作成功');
            } else {
              this.$message.error(res.data.errorMsg);
            }
          });
      }).catch(() => {
      });
    },
    // 删除
    btnDelete (index, row) {
      this.$confirm('确认删除该精品线路么?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        deleteInfoById(row.id).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.searchTableList();
        });
      }).catch(() => {
      });
    },
    addressValue (value) {
      if (value) {
        return value;
      } else {
        return null;
      }
    },
    // 新增数据提交
    handleSubmit () {
      // 表单验证
      this.$refs['objInfo'].validate((valid) => {
        if (valid) {
          if (!this.objInfo.objInfoStartCitySelect[1]) {
            return this.$message.error('起始城市有误，请至少选到市一级！');
          }
          this.objInfo.startProvinceId = this.addressValue(this.objInfo.objInfoStartCitySelect[0]);
          this.objInfo.startCityId = this.addressValue(this.objInfo.objInfoStartCitySelect[1]);
          this.objInfo.startCountyId = this.addressValue(this.objInfo.objInfoStartCitySelect[2]);
          if (!this.objInfo.objInfoEndCitySelect[1]) {
            return this.$message.error('目的城市有误，请至少选到市一级！');
          }
          this.objInfo.endProvinceId = this.addressValue(this.objInfo.objInfoEndCitySelect[0]);
          this.objInfo.endCityId = this.addressValue(this.objInfo.objInfoEndCitySelect[1]);
          this.objInfo.endCountyId = this.addressValue(this.objInfo.objInfoEndCitySelect[2]);
          if (this.imageUrl[0]) {
            this.objInfo.image = this.imageUrl[0];
          } else {
            if (!(this.objInfo.id)) {
              this.objInfo.image = null;
            }
          }
          if (this.objInfo.objInfoOrgIds[0]) {
            this.objInfo.orgId = this.objInfo.objInfoOrgIds[this.objInfo.objInfoOrgIds.length - 1];
            this.objInfo.orgIds = this.objInfo.objInfoOrgIds.join(',');
          }
          this.objInfo.ageingTypeName = getSelectObect(this.objInfo.ageingType, 'dictVal', this.$store.getters.AGING_CLASSIFICATION).cnDictValname;
          this.objInfo.status = 111002002;// 默认未启用
          this.submitLoading = true;
          this.isView = true;
          saveExcellentRoute(this.objInfo).then((res) => {
            this.submitLoading = false;
            if (res.data.successFlg === true) {
              this.dialogPublishVisible = false;
              this.$message.success('保存/修改成功！');
              this.loadingLists('');
            } else {
              this.$message.error(res.data.errorMsg);
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          return false;
        }
      });
      this.isView = false;
    },
    // 弹出添加窗体
    handleAdd () {
      this.dialogTitle = '新增';
      this.resetForm();
      this.currentOrganizationIds = [];
      this.VehicleVisible = true;
    },
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchTableList();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    // 重置查询条件
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
      this.startCitySelect = [];
      this.endCitySelect = [];
      this.dateRange = [];
    },
    // 查询列表执行
    loadingLists (filter = '') {
      this.listLoading = true;
      searchExcellentRouteList({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage,
        sorts: (this.sortProp === null ? '' : (this.sortOrder === 'ascending' ? '-' : '+') + this.sortProp)
      }).then(res => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
        ;
        this.listLoading = false;
      });
    },
    // 查询调用
    searchTableList () {
      let filters = objToFilter(this.searchCondition);
      if (this.dateRange[0]) {
        filters += ';GT_createDate=' + this.dateRange[0].toJSON();
        filters += ';LT_createDate=' + this.$ue.addDays(this.dateRange[1], 1).toJSON();
      }
      this.loadingLists(filters);
    },
    // 根据ID获取精品线路信息
    getInfoExcellentRoute (routeId) {
      getExcellentRouteById(routeId).then(res => {
        if (res.data.successFlg) {
          let info = res.data.obj;
          this.objInfo = info;
          this.objInfo.objInfoStartCitySelect = [info.startProvinceId, info.startCityId, info.startCountyId];
          this.objInfo.objInfoEndCitySelect = [info.endProvinceId, info.endCityId, info.endCountyId];
          this.objInfo.objInfoOrgIds = isEmpty(info.orgIds) === true ? [] : info.orgIds.split(',');
          if (this.objInfo && this.objInfo.image) {
            this.fileList = [{name: '线路图片', url: this.objInfo.imgUrlHeader + this.objInfo.image}];
          } else {
            this.fileList = [];
          };
        };
      });
    },
    // 重置精品线路信息表单
    resetInfoForm () {
      this.dialogPublishVisible = false;
      this.dialogKeyPublish = Math.random() - 0.5;
      for (let p in this.objInfo) {
        if (this.objInfo[p] instanceof Array) {
          this.objInfo[p] = [];
        } else {
          this.objInfo[p] = null;
        }
      };
      this.fileList = [];
      this.imageUrl = [];
    },
    // 地址数据删除为空的子地址
    clearEmptyChildren (items) {
      let o = this.clearEmptyChildren;
      items.forEach(function (v) {
        if (v.children.length === 0) {
          delete v.children;
        } else {
          o(v.children);
        }
      });
    },
    // ---------图片上传
    //  图片预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisiblePicture = true;
    },
    //  图片预览清楚
    closePictureCardPreview () {
      this.dialogVisiblePicture = false;
      this.dialogImageUrl = null;
    },
    handleRemoveImg (file, fileList) {
      this.imageUrl = [];
    },
    handlePreviewImg (file) {
      this.imageUrl.push(file.obj);
    },
    beforeUploadImg (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      const isLt2M = file.size / 1024 / 1024 <= 0.5;
      if (!isJPG) {
        this.$message.error('上传线路图片只能是 JPG 和 png格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传线路图片大小不能超过 500kb!');
        // this.$message.error('上传线路图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill;
    }
  },
  mounted () {
    addressDictsSimpleWithType('level=1,2,3').then(res => {
      let list = res.data.detailModelList;
      this.addressDictData = list;
      this.clearEmptyChildren(list);
    }).catch(err => {
      console.error(err);
    });
    this.loadingLists('');
    this.$store.commit('initStowages');
    this.$store.commit('initDict');
    this.$store.commit('initOrganizations');
  }
};
</script>
